<template>
    <div class="personal-main">
        <div class="personal-pay">
            <h3><i>借款⼈信息认证</i></h3>
            <el-steps :active="active" style="margin: 40px">
                <el-step title="填写借款⼈信息"></el-step>
                <el-step title="提交平台审核"></el-step>
                <el-step title="等待认证结果"></el-step>
            </el-steps>
            <div v-if="active === 0" class="user-borrower">
                <h6>个⼈基本信息</h6>
                <el-form label-width="120px">
                    <el-form-item label="年龄">
                        <el-col :span="5">
                            <el-input v-model="borrower.age" />
                        </el-col>
                    </el-form-item>
                    <el-form-item label="性别">
                        <el-select v-model="borrower.sex">
                            <el-option :value="1" :label="'男'" />
                            <el-option :value="0" :label="'⼥'" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="婚否">
                        <el-select v-model="borrower.marry">
                            <el-option :value="true" :label="'是'" />
                            <el-option :value="false" :label="'否'" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="学历">
                        <el-select v-model="borrower.education">
                            <el-option v-for="item in educationList" :key="item.value" :label="item.name"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="⾏业">
                        <el-select v-model="borrower.industry">
                            <el-option v-for="item in industryList" :key="item.value" :label="item.name"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="⽉收⼊">
                        <el-select v-model="borrower.income">
                            <el-option v-for="item in incomeList" :key="item.value" :label="item.name"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="还款来源">
                        <el-select v-model="borrower.returnSource">
                            <el-option v-for="item in returnSourceList" :key="item.value" :label="item.name"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-form>
                <h6>联系⼈信息</h6>
                <el-form label-width="120px">
                    <el-form-item label="联系⼈姓名">
                        <el-col :span="5">
                            <el-input v-model="borrower.contactsName" />
                        </el-col>
                    </el-form-item>
                    <el-form-item label="联系⼈⼿机">
                        <el-col :span="5">
                            <el-input v-model="borrower.contactsMobile" />
                        </el-col>
                    </el-form-item>
                    <el-form-item label="联系⼈关系">
                        <el-select v-model="borrower.contactsRelation">
                            <el-option v-for="item in contactsRelationList" :key="item.value" :label="item.name"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-form>
                <h6>身份认证信息</h6>
                <el-form label-width="120px">
                    <el-form-item label="身份证⼈像⾯">
                        <el-upload :on-success="onUploadSuccessIdCard1" :on-remove="onUploadRemove" :multiple="false"
                            :action="uploadUrl" :data="{ module: 'idCard1' }" :limit="1" list-type="picture-card">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="身份证国徽⾯">
                        <el-upload :on-success="onUploadSuccessIdCard2" :on-remove="onUploadRemove" :multiple="false"
                            :action="uploadUrl" :data="{ module: 'idCard2' }" :limit="1" list-type="picture-card">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                    </el-form-item>
                </el-form>
                <h6>其他信息</h6>
                <el-form label-width="120px">
                    <el-form-item label="房产信息">
                        <el-upload :on-success="onUploadSuccessHouse" :on-remove="onUploadRemove" :multiple="false"
                            :action="uploadUrl" :data="{ module: 'house' }" list-type="picture-card">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="⻋辆信息">
                        <el-upload :on-success="onUploadSuccessCar" :on-remove="onUploadRemove" :multiple="false"
                            :action="uploadUrl" :data="{ module: 'car' }" list-type="picture-card">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                    </el-form-item>
                </el-form>
                <el-form label-width="120px">
                    <el-form-item>
                        <el-button type="primary" :disabled="submitBtnDisabled" @click="save">
                            提交
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div v-if="active === 1">
                <div style="margin-top:40px;">
                    <el-alert title="您的认证申请已成功提交，请耐⼼等待" type="warning" show-icon :closable="false">
                        我们将在2⼩时内完成审核，审核时间为周⼀⾄周五8:00⾄20:00。
                    </el-alert>
                </div>
            </div>
            <div v-if="active === 2">
                <div style="margin-top:40px;">
                    <el-alert v-if="borrowerStatus === 2" title="您的认证审批已通过" type="success" show-icon :closable="false">
                    </el-alert>
                    <NuxtLink to="/user/apply" v-if="borrowerStatus === 2">
                        <el-button style="margin-top:20px;" type="success">
                            我要借款
                        </el-button>
                    </NuxtLink>
                    <el-alert v-if="borrowerStatus === -1" title="您的认证审批未通过" type="error" show-icon :closable="false">
                    </el-alert>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        let BASE_API = process.env.BASE_API
        return {
            active: 0, //步骤
            borrowerStatus: null,
            submitBtnDisabled: false,
            //借款⼈信息
            borrower: {
                borrowerAttachList: [],
            },
            educationList: [], //学历列表
            industryList: [], //⾏业列表
            incomeList: [], //⽉收⼊列表
            returnSourceList: [], //还款来源列表
            contactsRelationList: [], //联系⼈关系
            uploadUrl: BASE_API + '/api/oss/file/upload', //⽂件上传地址
        }
    },
    created() {
        this.getUserInfo()
    },
    methods: {
        save() {
            this.submitBtnDisabled = true
            this.$axios.$post('/api/core/borrower/save', this.borrower)
                .then((response) => {
                    this.active = 1
                })
        },

        onUploadSuccessIdCard1(response, file) {
            this.onUploadSuccess(response, file, 'idCard1')
        },
        onUploadSuccessIdCard2(response, file) {
            this.onUploadSuccess(response, file, 'idCard2')
        },
        onUploadSuccessHouse(response, file) {
            this.onUploadSuccess(response, file, 'house')
        },
        onUploadSuccessCar(response, file) {
            this.onUploadSuccess(response, file, 'car')
        },
        onUploadSuccess(response, file, type) {
            // debugger
            if (response.code !== 0) {
                this.$message.error(response.message)
                return
            }
            // 填充上传⽂件列表
            this.borrower.borrowerAttachList.push({
                imageName: file.name,
                imageUrl: response.data.url,
                imageType: type,
            })
        },
        onUploadRemove(file, fileList) {
            console.log('fileList', fileList)
            //删除oss服务器上的内容
            this.$axios
                .$delete('/api/oss/file/remove?url=' + file.response.data.url)
                .then((response) => {
                    // debugger
                    console.log('远程删除')
                    this.borrower.borrowerAttachList = this.borrower.borrowerAttachList.
                        filter(
                            function (item) {
                                console.log('item', item)
                                return item.imageUrl != file.response.data.url
                            }
                        )
                })
        },
        initSelected() {
            //学历列表
            this.$axios
                .$get('/api/core/dict/findByDictCode/education')
                .then((response) => {
                    this.educationList = response.data.list
                })
            //⾏业列表
            this.$axios
                .$get('/api/core/dict/findByDictCode/industry')
                .then((response) => {
                    this.industryList = response.data.list
                })
            //收⼊列表
            this.$axios
                .$get('/api/core/dict/findByDictCode/income')
                .then((response) => {
                    this.incomeList = response.data.list
                })
            //还款来源列表
            this.$axios
                .$get('/api/core/dict/findByDictCode/returnSource')
                .then((response) => {
                    this.returnSourceList = response.data.list
                })
            //联系⼈关系列表
            this.$axios
                .$get('/api/core/dict/findByDictCode/relation')
                .then((response) => {
                    this.contactsRelationList = response.data.list
                })
        },
        //获取借款⼈信息
        getUserInfo() {
            this.$axios
                .$get('/api/core/borrower/auth/getBorrowerStatus')
                .then((response) => {
                    this.borrowerStatus = response.data.borrowerStatus
                    if (this.borrowerStatus === 0) {
                        //未认证
                        this.active = 0
                        //获取下拉列表
                        this.initSelected()
                    } else if (this.borrowerStatus === 1) {
                        //认证中
                        this.active = 1
                    } else if (this.borrowerStatus === 2) {
                        //认证成功
                        this.active = 2
                    } else if (this.borrowerStatus === -1) {
                        //认证失败
                        this.active = 2
                    }
                })
        }
    },
}
</script>